import React from 'react';
import router from 'umi/router';

import { connect } from 'dva';

import { Card, Divider, Button, Table,Modal } from 'antd';

import DescriptionList from '@/components/DescriptionList';
const { Description } = DescriptionList;


const formPath = '/AccountMove/AccountMoveForm';
const listPath = '/AccountMove/AccountMoves';



@connect(({ accountMove }) => ({ accountMove }))
class Profile extends React.Component {
  state = {

    visibleDel: false,
    delMessage: '',
    visiblePost: false,
    visibleUnpost: false,

  }

  treeview = [
      { title: '摘要', dataIndex: 'name', },
      { title: '科目编码', dataIndex: 'account_id.code', },
      { title: '科目名称', dataIndex: 'account_id.name', },
      { title: '明细编码', dataIndex: 'sub_account_id.code', },
      { title: '明细科目', dataIndex: 'sub_account_id.name', },
      { title: '数量', dataIndex: 'quantity', },
      { title: '借方', dataIndex: 'debit', },
      { title: '贷方', dataIndex: 'credit', },
      { title: '到期', dataIndex: 'date_maturity', },
  ]


  id = 0

  async componentDidMount() {
    const { location: {query: { id } } } = this.props;
    this.id = Number(id)
    if (this.id) {
      const { dispatch } = this.props;
      dispatch({
        type: 'accountMove/view',
        payload:  { id: this.id }
      });
    }
  }


  goto_createForm() {
    const { accountMove: { record } } = this.props;
    if(record.id){
      router.push(`${formPath}?id=${record.id}`);
    }
  }

  showDeleteMove() {
    this.setState({
      visibleDel: true
    })

  }

  showPostMove() {
    this.setState({
      visiblePost: true
    })

  }

  showUnpostMove() {
    this.setState({
      visibleUnpost: true
    })

  }

  handleCancel(){
    this.setState({
      visibleDel: false,
      visiblePost: false,
      visibleUnpost: false,
    })
  }

  async delMove(){
    if (this.id) {
      const { dispatch } = this.props;
      await dispatch({
        type: 'accountMove/unlink',
        payload:  { id: this.id }
      });

      const { accountMove } = this.props;
      if( accountMove.id ){
        this.setState({
          delMessage: '不能删除该记录'
        })
      }
      else{
        router.push(listPath);

      }
    }
  }

  async postMove(){

    if (this.id) {
      const { dispatch } = this.props;
      await dispatch({
        type: 'accountMove/post',
        payload:  { id:this.id, fields: this.fields }
      });

      this.setState({
        visiblePost: false
      })

    }
  }

  async unpostMove(){
    if (this.id) {
      const { dispatch } = this.props;
      await dispatch({
        type: 'accountMove/unpost',
        payload:  { id:this.id, fields: this.fields }
      });

      this.setState({
        visibleUnpost: false
      })

    }
  }

  async refresh(){
    if (this.id) {
      const { dispatch } = this.props;
      await dispatch({
        type: 'accountMove/refresh',
        payload:  { id:this.id, fields: this.fields }
      });

    }
  }


  render() {
    const { accountMove: { record } } = this.props;

    //console.log('',record)

    const { visiblePost,visibleUnpost, visibleDel,delMessage } = this.state

    const journal_id = record.journal_id || {}

    return (
      <Card bordered={false}>

        <DescriptionList size="large" title='操作控制' style={{ marginBottom: 32 }}>
          <Description >
            <Button onClick={()=>this.goto_createForm()}>编辑</Button>
          </Description>
          <Description >
            <Button onClick={()=>this.showDeleteMove()}>删除</Button>
          </Description>
          <Description >
            <Button onClick={()=>this.showPostMove()}>过账</Button>
          </Description>

          <Description >
            <Button onClick={()=>this.showUnpostMove()}>反过账</Button>
          </Description>
          <Description >
            <Button onClick={()=>this.refresh()}>刷新</Button>
          </Description>

        </DescriptionList>

        <Modal title='删除'
          visible={visibleDel}
          onOk={()=>this.delMove()}
          onCancel={()=>this.handleCancel()}
        >
          确认删除?
          {delMessage}

        </Modal>

        <Modal title='过账'
          visible={visiblePost}
          onOk={()=>this.postMove()}
          onCancel={()=>this.handleCancel()}
        >
          确认过账?
        </Modal>

        <Modal title='反过账'
          visible={visibleUnpost}
          onOk={()=>this.unpostMove()}
          onCancel={()=>this.handleCancel()}
        >
          确认 反过账?
        </Modal>

        <DescriptionList size="large" title='说明' style={{ marginBottom: 32 }}>
          <Description term='' >{'凭证明细行，必须验证借贷平衡后，才可以写入服务器'}</Description>
        </DescriptionList>


        <DescriptionList size="large" title='基本信息' style={{ marginBottom: 32 }}>
          <Description term='账簿' >{journal_id.name}</Description>
          <Description term='凭证号' >{record.name_cn}</Description>
          <Description term='名称' >{record.name}</Description>
          <Description term='日期' >{record.date}</Description>
          <Description term='摘要' >{record.ref}</Description>
          <Description term='金额' >{record.amount}</Description>
          <Description term='附件张数' >{record.attachment_count}</Description>
          <Description term='金额' >{record.state}</Description>
        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />
        <Table columns={this.treeview} dataSource={record.line_ids} rowKey="id" />
      </Card>
    );
  }
}

export default Profile;


